@import url("../../[branding]_components/dealers.css");

.dealers-network {
  background: var(--dealers-network-bg);
  max-width: var(--dealers-network-max-width);
  margin: var(--dealers-network-margin);
}

.dealers-network__layout {
  display: var(--dealers-network-display);
  min-height: var(--dealers-network-min-height);
}

/* Sidebar */
.dealers-network__sidebar {
  background: var(--dealers-sidebar-bg);
  width: var(--dealers-sidebar-width);
  flex-shrink: 0;
  padding: var(--dealers-sidebar-padding);
  box-sizing: border-box;
}

/* Content area */
.dealers-network__content {
  flex: 1;
  padding: var(--dealers-content-padding);
  box-sizing: border-box;
}

.dealers-network__sidebar-title {
  font-weight: var(--dealers-sidebar-title-weight);
  font-size: var(--dealers-sidebar-title-size);
  margin: 0 0 var(--dealers-sidebar-title-spacing);
  color: var(--dealers-sidebar-title-color);
  font-family: var(--dealers-sidebar-title-font);
}

.dealers-network__sidebar-inner {
  position: sticky;
  top: 50px;
}

.dealers-network__sidebar-title:last-of-type {
  font-weight: var(--dealers-sidebar-last-of-type-weight);
  color: var(--dealers-sidebar-last-of-type-color);
  margin: var(--dealers-sidebar-last-of-type-margin);
  font-size: var(--dealers-sidebar-last-of-type-size);
  font-family: var(--dealers-sidebar-last-of-type-font);
}

.dealers-network__field {
  margin-bottom: var(--dealers-field-spacing);
}

.dealers-network__field label {
  display: none;
}

.dealers-network__select {
  width: var(--dealers-select-width);
  height: var(--dealers-select-height);
  padding: 0;
  border: none;
  border-bottom: var(--dealers-select-border-bottom);
  background-color: var(--dealers-select-bg);
  border-radius: var(--dealers-select-border-radius);
  font-size: var(--dealers-select-font-size);
  font-family: var(--dealers-select-font-family);
  color: var(--dealers-select-text-color);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: var(--dealers-select-icon-image);
  background-repeat: var(--dealers-select-icon-repeat);
  background-position: var(--dealers-select-icon-position);
  margin-bottom: var(--dealers-select-margin-bottom);
}

.dealers-network__select:focus {
  outline: none;
  border-bottom: var(--dealers-select-focus-border-bottom);
}

.dealers-network__select:disabled {
  color: var(--dealers-select-disabled-text-color);
  border-bottom: var(--dealers-select-disabled-border-bottom);
  cursor: var(--dealers-select-disabled-cursor);
  background-image: var(--dealers-select-disabled-icon-image);
}

.dealers-network__checks {
  display: var(--dealers-checks-display);
  gap: var(--dealers-checks-gap);
}

.dealers-network__checks label {
  display: var(--dealers-checks-label-display);
  align-items: var(--dealers-checks-label-align);
  gap: var(--dealers-checks-label-gap);
  font-size: var(--dealers-checks-label-font-size);
  font-family: var(--dealers-checks-label-font-family);
  font-weight: var(--dealers-checks-label-font-weight);
  color: var(--dealers-checks-label-text-color);
  cursor: var(--dealers-checks-label-cursor);
  margin-left: var(--dealers-checks-label-margin-left);
}

.dealers-network__checks label:first-child {
  margin-left: var(--dealers-checks-label-first-margin-left);
}

.dealers-network__checks input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--dealers-checkbox-size);
  height: var(--dealers-checkbox-size);
  border: var(--dealers-checkbox-border);
  border-radius: var(--dealers-checkbox-radius);
  cursor: var(--dealers-checkbox-cursor);
  position: var(--dealers-checkbox-position);
  flex-shrink: var(--dealers-checkbox-flex-shrink);
}

.dealers-network__checks input[type="checkbox"]:checked {
  background: var(--dealers-checkbox-checked-bg);
  border-color: var(--dealers-checkbox-checked-border-color);
}

.dealers-network__checks input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: var(--dealers-checkbox-checkmark-left);
  top: var(--dealers-checkbox-checkmark-top);
  width: var(--dealers-checkbox-checkmark-width);
  height: var(--dealers-checkbox-checkmark-height);
  border: solid var(--dealers-checkbox-checkmark-color);
  border-width: var(--dealers-checkbox-checkmark-border-width);
  transform: translate(-50%, -50%)
    rotate(var(--dealers-checkbox-checkmark-rotate));
}

.dealers-network__checks input[type="checkbox"]:indeterminate {
  background: var(--dealers-checkbox-indeterminate-bg);
  border-color: var(--dealers-checkbox-indeterminate-border-color);
}

.dealers-network__checks input[type="checkbox"]:indeterminate::after {
  content: "";
  position: absolute;
  left: var(--dealers-checkbox-indeterminate-icon-left);
  top: var(--dealers-checkbox-indeterminate-icon-top);
  width: var(--dealers-checkbox-indeterminate-icon-width);
  height: var(--dealers-checkbox-indeterminate-icon-height);
  background: var(--dealers-checkbox-indeterminate-icon-bg);
  transform: var(--dealers-checkbox-indeterminate-icon-translate);
}

/* Main */
.dealers-network__main {
  width: var(--dealers-main-width);
}

.dealers-network__title {
  font-weight: var(--dealers-title-font-weight);
  font-size: var(--dealers-title-font-size);
  font-family: var(--dealers-title-font-family);
  margin: var(--dealers-title-margin);
  text-transform: var(--dealers-title-text-transform);
  letter-spacing: var(--dealers-title-letter-spacing);
  color: var(--dealers-title-color);
}

/* Grid cards */
.dealers-network__grid {
  display: var(--dealers-grid-display);
  grid-template-columns: var(--dealers-grid-columns);
  gap: var(--dealers-grid-gap);
}

.dealers-network__empty {
  grid-column: var(--dealers-empty-grid-column);
  text-align: var(--dealers-empty-text-align);
  color: var(--dealers-empty-text-color);
  padding: var(--dealers-empty-padding);
  font-size: var(--dealers-empty-font-size);
  font-family: var(--dealers-empty-font-family);
}

/* Dealer card */
.dealer-card {
  background: var(--dealer-card-bg);
  border: var(--dealer-card-border);
  border-radius: var(--dealer-card-border-radius);
  overflow: var(--dealer-card-overflow);
  box-shadow: var(--dealer-card-box-shadow);
}

.dealer-card__media {
  width: var(--dealer-card-media-width);
  height: var(--dealer-card-media-height);
  overflow: var(--dealer-card-media-overflow);
}

.dealer-card__img {
  width: var(--dealer-card-img-width);
  height: var(--dealer-card-img-height);
  object-fit: var(--dealer-card-img-object-fit);
}

.dealer-card__body {
  padding: var(--dealer-card-body-padding);
}

.dealer-card__title {
  font-size: var(--dealer-card-title-font-size);
  font-weight: var(--dealer-card-title-font-weight);
  font-family: var(--dealer-card-title-font-family);
  margin: var(--dealer-card-title-margin);
  color: var(--dealer-card-title-color);
}

.dealer-card__address {
  font-size: var(--dealer-card-address-font-size);
  font-family: var(--dealer-card-address-font-family);
  font-weight: var(--dealer-card-address-font-weight);
  color: var(--dealer-card-address-color);
  margin: var(--dealer-card-address-margin);
  line-height: var(--dealer-card-address-line-height);
}

/* Accordion */
.dealer-card__accordion {
  padding: var(--dealer-card-accordion-padding);
}

.dealer-acc {
  border-bottom: var(--dealer-acc-border-bottom);
}

.dealer-acc__head {
  width: var(--dealer-acc-head-width);
  display: var(--dealer-acc-head-display);
  align-items: var(--dealer-acc-head-align-items);
  justify-content: var(--dealer-acc-head-justify-content);
  padding: var(--dealer-acc-head-padding);
  background: var(--dealer-acc-head-bg);
  border: var(--dealer-acc-head-border);
  cursor: var(--dealer-acc-head-cursor);
  font-weight: var(--dealer-acc-head-font-weight);
  font-size: var(--dealer-acc-head-font-size);
  font-family: var(--dealer-acc-head-font-family);
  color: var(--dealer-acc-head-text-color);
}

.dealer-acc__icon {
  width: var(--dealer-acc-icon-width);
  height: var(--dealer-acc-icon-height);
  position: var(--dealer-acc-icon-position);
}

.dealer-acc__icon::before {
  content: "";
  position: absolute;
  inset: var(--dealer-acc-icon-after-inset);
  margin: var(--dealer-acc-icon-after-margin);
  width: var(--dealer-acc-icon-after-width);
  height: var(--dealer-acc-icon-after-height);
  border-right: var(--dealer-acc-icon-after-border-right);
  border-bottom: var(--dealer-acc-icon-after-border-bottom);
  transform: rotate(var(--dealer-acc-icon-after-rotate));
  transition: var(--dealer-acc-icon-after-transition);
}

.dealer-acc.is-open .dealer-acc__icon::before {
  transform: rotate(var(--dealer-acc-icon-open-rotate));
}

.dealer-acc__panel {
  padding: var(--dealer-acc-panel-padding);
}

.dealer-acc__cols {
  display: var(--dealer-acc-cols-display);
  grid-template-columns: var(--dealer-acc-cols-template);
  gap: var(--dealer-acc-cols-gap);
}

.dealer-acc__cols > div > p {
  font-size: var(--dealer-acc-col-title-font-size);
  font-weight: var(--dealer-acc-col-title-font-weight);
  font-family: var(--dealer-acc-col-title-font-family);
  margin: var(--dealer-acc-col-title-margin);
  color: var(--dealer-acc-col-title-color);
}

.dealer-acc__label {
  font-size: var(--dealer-acc-label-font-size);
  font-weight: var(--dealer-acc-label-font-weight);
  margin: 0 0 var(--dealer-acc-label-margin-bottom);
  color: var(--dealer-acc-label-color);
}

.dealer-acc__text {
  font-size: var(--dealer-acc-text-font-size);
  color: var(--dealer-acc-text-color);
}

/* Hours of operation - two sub-columns */
.dealer-acc__hours-grid {
  display: grid;
  grid-template-columns: var(--dealer-acc-hours-columns);
  gap: var(--dealer-acc-hours-gap);
}

.dealer-acc__hours-col {
  font-size: var(--dealer-acc-hours-font-size);
  color: var(--dealer-acc-hours-color);
  font-family: var(--dealer-acc-hours-font-family);
  font-weight: var(--dealer-acc-hours-font-weight);
}

.dealer-acc__hours p,
.dealer-acc__phones p {
  font-size: var(--dealer-acc-section-label-font-size);
  font-weight: var(--dealer-acc-section-label-font-weight);
  margin: 0 0 var(--dealer-acc-section-label-margin-bottom);
  color: var(--dealer-acc-section-label-color);
}

.dealer-acc__row {
  display: flex;
  flex-direction: column;
  gap: var(--dealer-acc-row-gap);
  margin-bottom: var(--dealer-acc-row-margin-bottom);
}

.dealer-acc__muted {
  color: var(--dealer-acc-muted-color);
  font-size: var(--dealer-acc-muted-font-size);
}

.dealer-acc__phone {
  display: flex;
  align-items: center;
  gap: var(--dealer-acc-phone-gap);
  text-decoration: none;
  color: var(--dealer-acc-phone-color);
  font-size: var(--dealer-acc-phone-font-size);
  margin-bottom: var(--dealer-acc-phone-margin-bottom);
  font-family: var(--dealer-acc-phone-font-family);
  font-weight: var(--dealer-acc-phone-font-weight);
}

.dealer-acc__phone::before {
  content: "";
  display: inline-block;
  width: var(--dealer-acc-phone-icon-size);
  height: var(--dealer-acc-phone-icon-size);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45  2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.dealer-acc__phone:hover {
  text-decoration: var(--dealer-acc-phone-hover-decoration);
}

/* Footer CTA links */
.dealer-card__footer {
  display: flex;
  justify-content: var(--dealer-card-footer-justify);
  padding-top: var(--dealer-card-footer-padding-top);
  margin-top: var(--dealer-card-footer-margin-top);
}

.dealer-card__cta {
  display: flex;
  align-items: center;
  gap: var(--dealer-card-cta-gap);
  font-size: var(--dealer-card-cta-font-size);
  font-weight: var(--dealer-card-cta-font-weight);
  text-decoration: var(--dealer-card-cta-text-decoration);
  color: var(--dealer-card-cta-color);
  font-family: var(--dealer-card-cta-font-family);
}

.dealer-card__cta:hover {
  text-decoration: var(--dealer-card-cta-hover-decoration);
}

/* Icon for Find Us */
.dealer-card__cta:first-child {
  color: var(--dealer-card-cta-findus-color);
}

.dealer-card__cta:first-child::before {
  content: "";
  display: inline-block;
  width: var(--dealer-card-cta-icon-size);
  height: var(--dealer-card-cta-icon-size);
  background-image: var(--dealer-card-cta-findus-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Icon for Website */
.dealer-card__cta:nth-child(2)::before {
  content: "";
  display: inline-block;
  width: var(--dealer-card-cta-icon-size);
  height: var(--dealer-card-cta-icon-size);
  background-image: var(--dealer-card-cta-website-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Icon for rate us */
.dealer-card__cta:last-child::before {
  content: "";
  display: inline-block;
  width: var(--dealer-card-cta-rateus-icon-size);
  height: var(--dealer-card-cta-rateus-icon-size);
  background-image: var(--dealer-card-cta-rateus-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: var(--sr-only-size);
  height: var(--sr-only-size);
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Mobile Filter Button (hidden on desktop) */
.dealers-network__filter-btn {
  display: var(--dealers-filter-btn-display-desktop);
}

/* Mobile Filter Panel */
.dealers-network__filter-panel {
  display: var(--dealers-filter-panel-display);
}

.dealers-network__filter-panel.is-open {
  display: var(--dealers-filter-panel-display-open);
  flex-direction: var(--dealers-filter-panel-direction);
  position: var(--dealers-filter-panel-position);
  top: var(--dealers-filter-panel-top);
  left: var(--dealers-filter-panel-left);
  width: var(--dealers-filter-panel-width);
  height: var(--dealers-filter-panel-height);
  background: var(--dealers-filter-panel-bg);
  z-index: var(--dealers-filter-panel-z-index);
  overflow-y: var(--dealers-filter-panel-overflow);
}

.dealers-network__filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dealers-filter-panel-header-padding-y)
    var(--dealers-filter-panel-header-padding-x);
  border-bottom: 1px solid var(--dealers-filter-panel-header-border);
  background: var(--dealers-filter-panel-header-bg);
}

.dealers-network__filter-panel-title {
  font-weight: var(--dealers-filter-title-font-weight);
  font-size: var(--dealers-filter-title-font-size);
  font-family: var(--dealers-filter-title-font-family);
  color: var(--dealers-filter-title-color);
  text-transform: var(--dealers-filter-title-transform);
}

.dealers-network__filter-back,
.dealers-network__filter-close {
  background: var(--dealers-filter-action-bg);
  border: var(--dealers-filter-action-border);
  cursor: var(--dealers-filter-action-cursor);
  padding: var(--dealers-filter-action-padding);
  color: var(--dealers-filter-action-color);
}

.dealers-network__filter-panel-body {
  flex: 1;
  padding: var(--dealers-filter-body-padding-y)
    var(--dealers-filter-body-padding-x);
  overflow-y: auto;
}

.dealers-network__filter-panel-footer {
  padding: var(--dealers-filter-footer-padding-y)
    var(--dealers-filter-footer-padding-x);
}

.dealers-network__filter-apply {
  width: var(--dealers-filter-apply-width);
  height: var(--dealers-filter-apply-height);
  background: var(--dealers-filter-apply-bg);
  color: var(--dealers-filter-apply-text-color);
  border: 0;
  font-size: var(--dealers-filter-apply-font-size);
  font-weight: var(--dealers-filter-apply-font-weight);
  font-family: var(--dealers-filter-apply-font-family);
  cursor: pointer;
  text-transform: var(--dealers-filter-apply-text-transform);
  border-radius: var(--dealers-filter-apply-radius);
  padding: var(--dealers-filter-apply-padding-y)
    var(--dealers-filter-apply-padding-x);
}

.dealers-network__filter-apply:hover {
  opacity: var(--dealers-filter-apply-hover-opacity);
}

/* Responsive */

/* Tablet (768px) - 2 columns, hide sidebar, show filter button */
@media (max-width: 1024px) {
  .dealers-network__filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dealers-filter-btn-gap);
    width: 100%;
    max-width: var(--dealers-filter-btn-max-width);
    height: var(--dealers-filter-btn-height);
    margin: 20px auto;
    background: var(--dealers-filter-btn-bg);
    color: var(--dealers-filter-btn-text);
    border: 0;
    font-size: var(--dealers-filter-btn-font-size);
    font-weight: var(--dealers-filter-btn-font-weight);
    font-family: var(--dealers-filter-btn-font-family);
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--dealers-filter-btn-radius);
    padding: var(--dealers-filter-btn-padding);
  }

  .dealers-network__filter-btn:hover {
    opacity: var(--dealers-filter-btn-hover-opacity);
  }

  .dealers-network__sidebar {
    display: none;
  }

  .dealers-network__content {
    padding: var(--dealers-content-padding);
  }

  .dealers-network__grid {
    grid-template-columns: var(--dealers-grid-columns);
  }

  .dealer-card__title {
    font-size: var(--dealer-card-title-size);
  }

  .dealer-card__address {
    font-size: var(--dealer-card-address-size);
  }

  .dealer-acc__head {
    font-size: var(--dealer-acc-head-size);
  }

  .dealer-card__accordion {
    padding: var(--dealer-card-accordion-padding);
  }

  .dealer-acc__cols > div > p {
    font-size: var(--dealer-acc-col-text-size);
  }

  .dealer-acc__phones p {
    display: none;
  }

  .dealer-acc__cols {
    display: block;
  }

  .dealer-acc__hours-grid {
    margin-bottom: var(--dealer-acc-hours-margin-bottom);
  }

  .dealer-acc__phone {
    font-size: var(--dealer-acc-phone-size);
    font-weight: var(--dealer-acc-phone-weight);
    font-family: var(--dealer-acc-phone-font);
    color: var(--dealer-acc-phone-color);
  }

  .dealers-network__select {
    font-size: var(--dealers-select-size);
  }

  .dealers-network__checks label {
    font-size: var(--dealers-check-label-size);
  }

  .dealers-network__filter-apply {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .dealers-network {
    padding: 30px 0;
  }
}

/* Mobile (max-width: 576px) - 1 column */
@media (max-width: 576px) {
  .dealers-network__grid {
    grid-template-columns: var(--dealers-grid-columns);
  }

  .dealers-network__content {
    padding: var(--dealers-content-padding);
  }

  .dealers-network__filter-btn {
    width: var(--dealers-filter-btn-width);
    height: var(--dealers-filter-btn-height);
    margin: var(--dealers-filter-btn-margin);
  }

  .dealer-card__address {
    font-size: var(--dealer-card-address-size);
  }

  .dealer-acc__hours-col {
    font-size: var(--dealer-acc-hours-col-size);
  }

  .dealers-network {
    padding: 20px;
  }
}